<template>
	<view class="first-home">
		<skeletons :loading="bannerFun.loading" :rowsHeight="['850rpx']">
			<view class="dots" v-if="bannerFun.list.length != 0">
				<swiper class="home-swiper-box" circular :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="500" @change="bannerFun.change">
					<swiper-item v-for="(item, index) in bannerFun.list" :key="`list-${index}`">
						<image @click="bannerFun.toPages(item)" class="item-img-box" :src="item.pic" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="dots-content">
					<view :class="['dots-item', bannerFun.current == index ? 'dots-item-active' : '']"
						v-for="(item, index) in bannerFun.list" :key="`lists-${index}`"></view>
				</view>
			</view>
		</skeletons>
		<skeletons :loading="getConfig.loading" :rowsHeight="['224rpx']">
			<view class="label-box">
				<image @click="getConfig.isDetails?openDetailRef(getConfig.banBottomDetail):''" class="label-img-box" :src="getConfig.banBottom" mode="widthFix"></image>
			</view>
		</skeletons>
		<skeletons :loading="getConfig.loading" :cols="2" colsHeight="312rpx">
			<view class="service">
				<view class="service-left">
					<image @click="getConfig.banLefisDetails?openDetailRef(getConfig.banLeftDetail):''" :src="getConfig.banLeft" mode=""></image>
				</view>
				<view class="service-right">
					<image @click="getConfig.banRightIsdetails?openDetailRef(getConfig.banRightDetail):''" :src="getConfig.banRight" mode=""></image>
				</view>
			</view>
		</skeletons>
		<skeletons :loading="getConfig.loading" :rowsHeight="['224rpx']">
			<view v-if="getConfig.bannerImg" class="label-banner" @click="tojoin">
				<image class="label-img-banner" :src="getConfig.bannerImg" mode=""></image>
			</view>
		</skeletons>
	</view>

	<uni-popup ref="popupRef" type="center">
		<view class="popup">
			<view class="p-title">温馨提示</view>
			<view class="p-content">{{ applyCheck.message }}</view>
			<view @click="applyCheck.tipsDeal" class="xjs-btn-primary p-btn">{{ applyCheck.btnText }}</view>
			<uni-icons @click="popupRef.close()" class="p-close" type="closeempty" size="24" color="#fff"></uni-icons>
		</view>
	</uni-popup>
	<uni-popup ref="detailRef" type="bottom" background-color="#fff" border-radius="32rpx 32rpx 0 0">
		<view class="popup-content">
			<view class="popup-title">
				<text>详情</text>
				<text class="close-icon" @click="detailRef.close()">×</text>
			</view>
			<view class="html" v-html="dealHtml(getDetailInto)"></view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import api from '@/api';
	import { getLocation } from '@/hooks/useFunction';
	import { ref, reactive, onMounted } from 'vue';
	import { loginStatus } from '@/hooks/useLogin';
	import { formatTime,dealHtml } from '@/hooks/useFunction';
	import { useUserStoreToRefs } from '@/store/useUserStore';
	const { isCheck, userInfo } = useUserStoreToRefs();

	onMounted(() => {
		bannerFun.getBanner();
		getConfig.getConfigContent();
		applyCheck.check();
	});
	const detailRef = ref()
	const getDetailInto = ref('')
	const openDetailRef = (detail) => {
		if (detail.length == 0) {
			return
		}
		getDetailInto.value = detail
		detailRef.value.open()
	}
	//轮播图
	const bannerFun = reactive({
		list: [],
		loading: true,
		current: 0,
		change: (event) => {
			bannerFun.current = event.detail.current;
		},
		getBanner: async () => {
			const res : any = await api({
				method: 'get',
				prefix: 'acc',
				url: `/app_common_contents/v2/list`
			});
			bannerFun.list = res.data.indexDisplayPics || [];
			bannerFun.loading = false;
		},
		toPages: async (item) => {
			console.log(item);
			switch (item.taptype) {
				case 'stu': //工作室
					let lacat : any = await getLocation();
					if (lacat) {
						const res : any = await api({
							method: 'get',
							url: `/mall/studio/getStudioStatus/${item.tapto}`,
							data: {
								longitudes: lacat.longitude,
								latitudes: lacat.latitude
							}
						});
						console.log(res, 'resresresres');
						// 0-启用 1-禁用
						if (res.data == 0) {
							uni.navigateTo({
								url: `/pages/studio/index/index?id=${item.tapto}`
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: '工作室已被禁用'
							});
						}
					}
					break;
				case 'page': //页面模块
					uni.navigateTo({
						url: '/pages/applyPetTeacher/index/index'
					});
					break;
			}
		}
	});

	//获取配置
	const getConfig = reactive<any>({
		bannerImg: '',
		loading: true,
		banBottom: '',
		banBottomDetail:"",
		banLeft: '',
		banLeftDetail:"",
		banRight: '',
		isDetails:0,
		banRightDetail:"",
		banRightIsdetails:0,
		banLefisDetails:0,
		getConfigContent: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/content/backend-configs/getHomeConfig`
			});
			getConfig.bannerImg = res.data['xjs.content.contentConfig.recruitShareBanner'];
			const res2 : any = await api({
				method: 'get',
				url: `/mall/content/home-page-config/list`
			});
			console.log(res2.data);
			if (res2.data.length > 0) {
				res2.data.forEach((item) => {
					if (item.type == 0) {
						getConfig.banBottom = item.areaPic;
						getConfig.banBottomDetail = item.areaDetails;
						getConfig.isDetails = item.isDetails;
						
					}
					if (item.type == 1) {
						getConfig.banLeft = item.areaPic;
						getConfig.banLeftDetail = item.areaDetails;
						getConfig.banLefisDetails = item.isDetails;
					}
					if (item.type == 2) {
						getConfig.banRight = item.areaPic;
						getConfig.banRightDetail = item.areaDetails;
						getConfig.banRightIsdetails = item.isDetails;
					}
				});
			}
			getConfig.loading = false;
		}
		// 0,1,2,4使用当前新接口的，3还是使用以前的home接口的
		// 类型(0-banner图下平台认证项，1-banner图下左导航，2-banner图下右导航，3-陪宠师招募区，4-工作室认证项)
	});
	//申请陪宠师
	const tojoin = () => {
		uni.navigateTo({
			url: '/pages/applyPetTeacher/index/index'
		});
	};

	//陪宠师申请校验
	const popupRef = ref();
	const applyCheck = reactive<any>({
		message: '',
		id: '',
		btnText: '',
		type: '',
		tipsDeal: () => {
			if ([2, 4].includes(applyCheck.type)) {
				uni.navigateTo({
					url: `/pages/myStudio/studio/applyForDetails/index?id=${applyCheck.id}`
				});
			}
			if (applyCheck.type == 1) {
				uni.navigateTo({
					url: '/pages/myStudio/index/index'
				});
			}
		},
		check: () => {
			loginStatus(async () => {
				const res : any = await api({
					method: 'post',
					url: `/mall/studio/apply-studio-record/checkUserPetSitter`
				});
				applyCheck.type = res.data;
				// 0-没有申请记录 1-恭喜，您已成功成为陪宠师 2-抱歉，您的陪宠师开通申请初审不通过 3-有申请陪宠师开通记录 4-抱歉，您的陪宠师开通申请终审不通过
				if ([2, 4].includes(res.data)) {
					if (isCheck.value == '' || isCheck.value != formatTime().format('YYYY-MM-DD')) {
						applyCheck.message = `抱歉,您的陪宠师开通申请${res.data == 2 ? '初审' : '终审'}不通过`;
						applyCheck.btnText = '去查看';
						applyCheck.id = res.msg; //msg返回的是陪宠师详情id
						isCheck.value = formatTime().format('YYYY-MM-DD');
						popupRef.value.open();
						return;
					}
				}
				//promptBoxType  0-未弹框 1-已弹框
				if (res.data == 1 && userInfo.value.promptBoxType == 0) {
					userInfo.value.promptBoxType = 1;
					applyCheck.message = '恭喜，您已成功成为陪宠师';
					applyCheck.btnText = '去接单';
					popupRef.value.open();
				}
			});
		}
	});
	defineExpose({ applyCheck,bannerFun,getConfig })
</script>

<style lang="scss" scoped>
	.first-home {
		min-height: 100vh;
		background-color: #fff;
		line-height: 1;
		border-bottom: calc(110rpx + var(--safe-area-bottom)) solid var(--pages-bg-color);
		box-sizing: border-box;

		.dots {
			position: relative;

			.home-swiper-box {
				width: 750rpx;
				height: 562rpx;

				.item-img-box {
					width: 750rpx;
					height: 562rpx;
				}
			}

			.dots-content {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				text-align: center;
				background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
				padding: 100rpx 0 32rpx;
				.dots-item-active {
					width: 32rpx !important;
					height: 8rpx !important;
					background: #ffffff !important;
					border-radius: 200rpx 200rpx 200rpx 200rpx !important;
				}

				.dots-item {
					display: inline-block;
					margin: 0 8rpx;
					width: 8rpx;
					height: 8rpx;
					background: #cccccc;
					border-radius: 50%;
					transition: all 0.5s linear;
				}
			}
		}

		.label-box {
			margin: 40rpx 32rpx;

			.label-img-box {
				width: 100%;
				height: 50rpx;
				border-radius: 24rpx;
			}
		}

		.service {
			margin: 0 32rpx 40rpx;
			display: flex;
			justify-content: space-between;
			gap: 24rpx;

			>view {
				flex: 1;
				// background-color: #FAF2E7;
				border-radius: 24rpx;
				height: 312rpx;
				overflow: hidden;
				>image {
					width: 100%;
					height: 312rpx;
				}
			}
		}

		.label-banner {
			margin: 0 32rpx 64rpx;

			.label-img-banner {
				width: 100%;
				height: 224rpx;
				border-radius: 24rpx;
			}
		}
	}

	.popup {
		width: 622rpx;
		padding: 64rpx;
		box-sizing: border-box;
		background: linear-gradient(343deg, #fec7b7 0%, #ff8498 100%);
		border-radius: 24rpx;
		text-align: center;
		color: #fff;
		position: relative;

		.p-title {
			font-weight: 500;
			font-size: 40rpx;
		}

		.p-content {
			padding: 64rpx 0;
			font-size: 30rpx;
		}

		.p-btn {
			height: 88rpx !important;
			width: 314rpx;
			margin: 0 auto;
		}

		.p-close {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;

		.popup-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: 500;

			.close-icon {
				font-size: 48rpx;
				color: #999;
				line-height: 1;
			}
		}
		.html{
			max-height: 70vh;
			overflow-y: scroll;
		}
	}
</style>